<template>
  <div id="order-id" class="mt36" >
    <!-- 面包屑 -->
    <div class="column-name">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>我的订单</el-breadcrumb-item>
        <el-breadcrumb-item>订单详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 订单信息 -->
    <div class="order-section">
      <div class="order-article">
        <div class="order-outer" style="border-bottom: 0; padding: 0; margin: 0;">
          <div class="order-about">
            <div class="order-about-item">
              <strong class="order-about-title">收货人信息</strong>
              <p class="order-about-count">{{order.address_name}} &nbsp; {{order.province}} &nbsp; {{order.city}} &nbsp; {{order.local}} &nbsp; {{order.remark}} &nbsp; 联系方式: &nbsp; {{order.mobile}}</p>
            </div>
            <div class="order-about-item">
              <strong class="order-about-title">支付信息</strong>
              <p class="order-about-count">实付金额:&nbsp; ￥{{order.shop_price}}</p>
            </div>
            <div class="order-about-item">
              <strong class="order-about-title">发票信息</strong>
              <p class="order-about-count">无发票</p>
            </div>
            <div class="order-about-item">
              <strong class="order-about-title">物流编号</strong>
              <p class="order-about-count">{{order.logistics}}</p>
            </div>
            <div class="order-about-item">
              <strong class="order-about-title">订单备注</strong>
              <p class="order-about-count">{{order.rrrr}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 订单状态 -->
    <div class="order-section">
      <div class="order-article">
        <div class="order-outer">
          <el-steps :active="active" process-status="finish" style="width: 60%;">
            <el-step title="提交订单" ></el-step>
            <el-step title="成功付款" ></el-step>
            <el-step title="商家发货" ></el-step>
            <el-step title="确认收货" ></el-step>
          </el-steps>
        </div>
        <div class="order-state">
          <div class="order-state-icon">
            <i class="el-icon-circle-check"></i>
          </div>
          <dl class="order-state-article">
            <dt class="order-state-name">{{status}}</dt>
            <dd>子订单号：{{$route.query.id}}</dd>
            <div v-if="!$route.query.fromSeller">
              <dd>
              如果已收到货，且对货物满意，您可以
              <el-button type="success" @click="souhuo" size="mini" v-if="order.status==3">确认收货</el-button>
               <el-button type="success" @click="$router.push('/personal/evaluate')" size="mini" v-if="order.status==4">去评价</el-button>
            </dd>
            </div>
          
          </dl>
        </div>
      </div>
    </div>
    <!-- 物品信息 -->
    <div class="goods-section">
      <div class="goods-body">
        <div class="goods-article">
          <div class="goods-head">
            <div class="order-info">
              <p class="goods-shop">卖家: {{order.name}}</p>
            </div>
            <!-- <div class="order-amount">
              <p class="order-amount-box">
                合计：
                <span class="goods-price">
                  ￥
                  <var>{{price}}</var>
                </span>
              </p>
            </div> -->
          </div>
          <div class="goods-outer">
            <div class="goods-mod" >
              <div class="goods-image">
                <img :src="order.imgs.split(',')[0]" alt />
              </div>
              <div class="goods-intro">
                <p class="goods-intro-name">{{order.product_name}}</p>
              </div>
              <div class="goods-column">
                <p>
                  ￥
                  <var>{{order.shop_price}}</var>
                </p>
              </div>
              <div class="goods-column">
                <p>
                  ×&nbsp;
                  <var>1</var>
                </p>
              </div>
              <!-- <div class="goods-column">
                <p class="goods-operate">退货/退款</p>
              </div> -->
              <div class="goods-column-last">
                <p class="goods-price">
                  ￥
                  <var>{{order.shop_price}}</var>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 订单金额 -->
    <div class="billing-info">
      <div class="billing-info-outer">
        <dl class="billing-info-box billing-info-box-first">
          <dt class="billing-info-attr">商品总价：</dt>
          <dd class="billing-info-val">
            ￥
            <var>{{order.shop_price}}</var>
          </dd>
        </dl>
        <!-- <dl class="billing-info-box">
          <dt class="billing-info-attr">运费：</dt>
          <dd class="billing-info-val">
            ￥
            <var>{{fright}}</var>
          </dd>
        </dl> -->
        <dl class="billing-info-box billing-info-box-last">
          <dt class="billing-info-attr">实付金额：</dt>
          <dd class="billing-info-val">
            ￥
            <var>{{order.shop_price}}</var>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
     active:null,
     order:{
        
     },
    status:null
    };
  },
  computed: {
    countNum: function() {
      return Number(this.fright) + Number(this.price);
    }
  },
  created(){
   this.init()
  },
  methods:{
    souhuo(){
        if(this.order.status == 3){
          //收货
          this.axios.post("order/update",{
            id:this.$route.query.id,
            status:4
          }).then(resp=>{
            if(resp.code ==0){
                this.$message.success(resp.msg)
                this.init()
            }else{
                this.$message.error(resp.msg)
            }
          })
        }else{
          this.$message.error("当前状态不满足收货状态！")
        }
    },
    init(){
       this.axios.post("/order/info",{
          id:this.$route.query.id
        }).then(resp=>{
          this.order = resp.data
          if(this.order.status == 1){
              this.active = 0
              this.status ="已下单"
          }
          if(this.order.status == 2){
              this.active = 1
              this.status ="已付款"
          }
          if(this.order.status == 3){
            this.active = 2
            this.status ="已发货"
          }
          if(this.order.status == 4){
            this.active = 3
            this.status ="已收货"
          }
        })
    }
  }
};
</script>

<style scoped>
#order-id {
  margin: 0 auto;
  margin-top: 36px;
  margin-bottom: 2%;
  width: 1080px;
}
.goods-section .goods-box,
.goods-section .goods-list,
.goods-section .goods-info,
.goods-section .goods-inner,
.goods-section .goods-image,
.goods-section .goods-more,
.goods-section .goods-intro,
.goods-section .goods-column,
.goods-section .goods-column-last,
.goods-section .goods-cancel,
.confirmBox .confirmBox-cancel,
.goods-section .goods-button,
.confirm-button,
.confirmBox .confirmBox-submit,
.pay-button,
.pay-notice .pay-notice-operate a,
.icon-success-36,
.icon-warning-36,
.icon-error-36,
.icon-wait-36,
.icon-leave-36,
.icon-success-32,
.icon-warning-32,
.icon-error-32,
.icon-wait-32,
.icon-leave-32,
.icon-success-21,
.icon-warning-21,
.icon-error-21,
.icon-wait-21,
.icon-leave-21,
.icon-success-14,
.icon-warning-14,
.icon-error-14,
.icon-wait-14,
.icon-leave-14,
.icon-empty,
.icon-delete,
.icon-edit,
.icon-close,
.icon-setting,
.icon-up,
.icon-down,
.icon-product,
.icon-shop,
.icon-big-cart-full,
.icon-big-cart,
.icon-small-cart-full,
.icon-small-cart,
.icon-pass-level-none,
.icon-pass-level-low,
.icon-pass-level-medium,
.icon-pass-level-high,
.icon-prev,
.icon-next,
.icon-favorite,
.icon-unfavorite,
.icon-watch,
.icon-unwatch,
.icon-heart,
.icon-big-correct,
.icon-big-correct-white,
.icon-small-correct,
.icon-small-correct-white,
.icon-share,
.icon-qq,
.icon-sina,
.icon-wechat,
.icon-renren,
.icon-txwb,
.icon-qzone,
.icon-car,
.icon-seven,
.icon-login-sina,
.icon-login-qq,
.icon-pack,
.icon-speaker,
.icon-code,
.checkbox,
.uncheckbox,
.checkbox-disabled,
.radio,
.unradio,
.icon-bell,
.icon-phone,
.icon-email,
.icon-date,
.icon-chat,
.icon-reload,
.icon-back,
.icon-service,
.icon-feedback,
.icon-circle,
.icon-small-current,
.icon-big-current,
.icon-upload-add,
.icon-upload-edit,
.pg-submit,
.pg-button,
.pg-goto,
.pg-outer,
.billing-info .billing-info-attr,
.billing-info .billing-info-val {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

/* 面包屑 */
.column-name,
.plugs-select,
.shopping-section .goods-section,
.shopping-section .goods-section .goods-article {
  margin-bottom: 24px;
}
.column-name .el-breadcrumb {
  font-size: 18px;
}
.el-breadcrumb__inner {
  font-size: 18px;
}

/* 订单信息 */
.order-section,
.goods-section .goods-article {
  margin-bottom: 36px;
}
.order-section {
  border: 1px solid #ddd;
}
.order-article {
  padding: 36px;
}
.column-name,
.plugs-select,
.order-outer,
.shopping-section .goods-section,
.shopping-section .goods-section .goods-article {
  margin-bottom: 24px;
}
.simplify-page,
.order-outer,
.shopping-section .module-title-16 {
  padding-bottom: 24px;
}
.order-outer {
  border-bottom: 1px dotted #d3d7d7;
}
.order-about-item {
  line-height: 22px;
  margin-top: 10px;
  overflow: hidden;
}
.order-about-item:first-child {
  margin-top: 0;
}
.order-about-title {
  float: left;
  width: 90px;
  font-size: 14px;
  font-weight: bold;
}
.order-about-cont {
  float: left;
  width: 700px;
  word-wrap: break-word;
}

/* 订单状态 */
.order-article {
  padding: 36px;
}
.order-state {
  overflow: hidden;
}
.pg-submit,
.order-state-icon,
.order-state-article,
.order-step .order-step-des,
.goods-section .order-info,
.pay-list .pay-view {
  display: inline;
  float: left;
}
.order-state-icon {
  margin-right: 12px;
}
.el-icon-circle-check {
  font-size: 36px;
  color: #29a3d6;
}

.order-state-name,
.order-state-des,
.goods-section .goods-intro-name,
.shopping-section .shopping-goods-head {
  margin-bottom: 12px;
}
.order-state-name {
  font-size: 21px;
  line-height: 36px;
}
.el-button--mini {
  background-color: #29a3d6;
}
.el-button--mini:hover {
  background-color: #0076a4;
}
/* 物品信息 */
.goods-section .goods-head,
.goods-section .goods-body {
  font-size: 0;
}
.goods-section .goods-head {
  height: 38px;
  border-bottom: 1px solid #ddd;
  line-height: 38px;
  color: #888;
}
.goods-section .goods-outer {
  font-size: 0;
  letter-spacing: -4px;
  border-bottom: 1px dotted #d3d7d7;
}
.goods-section .goods-more,
.goods-section .order-info {
  padding-left: 12px;
}
.goods-section .order-info,
.goods-section .order-amount {
  font-size: 12px;
  width: 40%;
}
.goods-section .order-amount,
.billing-info .billing-info-outer {
  display: inline;
  float: right;
}
.goods-section .order-amount {
  color: #333;
  text-align: right;
}

.goods-section .order-amount-box,
.goods-section .order-number {
  padding-right: 24px;
}
.goods-section .goods-price {
  font-size: 14px;
  color: #0076a4;
}

.goods-section .goods-mod {
  padding: 12px 0;
}
.goods-section .goods-mod {
  font-size: 0;
  letter-spacing: -4px;
  overflow: hidden;
}
.goods-section .goods-image,
.goods-section .goods-column,
.goods-section .goods-column-last,
.confirm-button,
.assess-button,
.confirmBox .confirmBox-cancel {
  margin-left: 12px;
}
.goods-section .goods-image,
.goods-section .goods-more,
.goods-section .goods-intro,
.goods-section .goods-column,
.goods-section .goods-column-last {
  font-size: 12px;
  letter-spacing: normal;
  float: left;
}
.goods-section .goods-image {
  max-width: 132px;
}
.goods-image img {
  width: 100%;
}
.goods-section .goods-intro {
  width: 235px;
}
.goods-section .goods-intro {
  margin-top: 35px;
}
.goods-section .goods-column,
.goods-section .goods-column-last {
  margin-top: 60px;
}
.goods-section .goods-intro,
.goods-section .goods-column,
.goods-section .goods-column-last {
  margin-left: 31px;
}

.goods-section .goods-intro-name {
  font-size: 13px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.goods-section .goods-column {
  width: 120px;
  text-align: center;
}
.goods-section .goods-operate {
  line-height: 30px;
}

.goods-section .goods-column-last {
  width: 161px;
  text-align: right;
}

/* 订单金额 */
.billing-info {
  padding: 24px;
  background-color: #f9f9f9;
  overflow: hidden;
}

.billing-info .billing-info-box {
  margin-top: 12px;
}
.billing-info .billing-info-box {
  position: relative;
  padding-right: 140px;
}
.billing-info .billing-info-box-first {
  margin-top: 0;
}
.billing-info .billing-info-attr {
  min-width: 115px;
}
.billing-info .billing-info-val {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 14px;
  text-align: right;
}
.billing-info .billing-info-box-last {
  border-top: 1px dotted #d0d4d4;
}
.billing-info .billing-info-box-last .billing-info-val,
.billing-info .billing-info-box-last .billing-info-val var {
  color: #00bebf;
  top: 12px;
  font-size: 20px;
}
</style>